<template>
    <div class="e-form" v-if="state === 'main'">
        <!-- <div class="title">
                <img src="@/assets/test.png" alt="" />
                <span>外包商入库</span>
                <i class="el-icon-full-screen" @click="handleFullScreen"></i>
            </div> -->
        <div class="tabs">
            <div class="tabs-title">基本信息</div>
            <div style="width: 100%" class="form">
                <el-form
                    :model="formData.baseInfo"
                    label-width="170px"
                    :rules="rules"
                    ref="ruleForm"
                >
                    <!-- <el-row>
                        <el-col :span="12">
                            <el-form-item label="公示编号：">
                                <div style="display: flex">
                                    <span>{{ formData.baseInfo.publicityNo }}</span>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发布日期：">
                                <span>{{ formData.baseInfo.publicTime }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row>
                        <el-col :span="12">
                            <el-form-item
                                label="招标编号："
                                prop="tenderApplyNo"
                            >
                                <div style="display: flex">
                                    <el-input
                                        v-model="
                                            formData.baseInfo.tenderApplyNo
                                        "
                                        disabled
                                    ></el-input>
                                    <ComShowBiddingButton
                                        :tenderId="tenderId"
                                    />
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item
                                label="拟招标项目名称："
                                prop="projectName"
                            >
                                <span>{{ formData.baseInfo.projectName }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="招标方式：" prop="tenderForm">
                                <span v-if="formData.baseInfo.tenderForm">{{
                                    formData.baseInfo.tenderForm
                                        | tenderForm(this)
                                }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="招标类型：" prop="tenderClass">
                                <span>{{
                                    formData.baseInfo.tenderClass
                                        | tenderClass(this)
                                }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="包件名称：" prop="packageName">
                                <div style="display: flex">
                                    <el-select
                                        v-model="formData.baseInfo.packageName"
                                        filterable
                                        placeholder="请选择"
                                        @change="
                                            selectChange($event, '包件名称')
                                        "
                                    >
                                        <el-option
                                            v-for="item in packageNameOptions"
                                            :key="item.dtlId"
                                            :label="item.name"
                                            :value="item.name"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="通知对象：" prop="noticeUser">
                                <div style="display: flex">
                                    <el-select
                                        v-model="formData.baseInfo.noticeUser"
                                        filterable
                                        placeholder="请选择"
                                        @change="
                                            selectChange($event, '通知对象')
                                        "
                                    >
                                        <el-option
                                            v-for="item in noticeUserNameOptions"
                                            :key="item.candidateId"
                                            :label="item.candidateName"
                                            :value="item.candidateName"
                                        >
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="是否中标：" prop="isBid">
                                <el-radio
                                    v-model="formData.baseInfo.isBid"
                                    :label="0"
                                    >未中标</el-radio
                                >
                                <el-radio
                                    v-model="formData.baseInfo.isBid"
                                    :label="1"
                                    >已中标</el-radio
                                >
                                <!-- <span>{{ formData.baseInfo.isBid === 0 ? '否' : '是' }}</span> -->
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="状态：" prop="state">
                                <span>{{
                                    formData.baseInfo.state | state(this)
                                }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item
                                label="招标机构："
                                prop="tenderOrgName"
                            >
                                <span>{{
                                    formData.baseInfo.tenderOrgName
                                }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="buttons">
            <!-- <span class="tip"
                    ><span style="color: red; margin-right: 0">*</span
                    >为必填项</span
                > -->
            <!-- <el-button
                    type="primary"

                    class="btn-blue"
                    >打印</el-button
                >
                <el-button
                    type="primary"

                    class="btn-blue"
                    >删除</el-button
                >
                <el-button
                    type="primary"

                    class="btn-blue"
                    >发布</el-button
                >
                <el-button
                    type="primary"

                    class="btn-blue"
                    >审核</el-button
                >
                <el-button
                    type="primary"

                    class="btn-blue"
                    >撤回</el-button
                > -->
            <el-button
                type="primary"
                class="btn-blue"
                @click="submit"
                size="small"
                >保存</el-button
            >
            <el-button @click="handleClose" size="small">取消</el-button>
        </div>
    </div>
</template>

<script>
// import ComTreeTable from '@/templates/table/treeTable.vue'
// import ComTreeFile from '@/templates/table/treeFile.vue'
// import ComPagination from '@/components/pagination/pagination.vue'
import bidNoticeRequest from '@/api/tender/bidNotice.js'
import applyRequest from '@/api/tender/apply.js'
// import tenderRequest from '@/api/tender/tender.js'
import ComShowBiddingButton from '@/pages/bidding/common/showBiddingButton.vue'
import { openAppClient } from '@/utils/common'
import { mapState } from 'vuex'

export default {
    data () {
        return {
            state: 'main',
            // dialogVisible: false,
            // fullscreen: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            tableData: [],
            value: '',
            textarea: '',
            formData: {
                baseInfo: {
                    billId: '',
                    isBid: 1,
                    noticeUser: '',
                    noticeUserId: '',
                    orgId: '',
                    orgName: '',
                    packageId: '',
                    packageName: '',
                    projectName: '',
                    publicityNo: '',
                    state: 0,
                    tenderApplyId: '',
                    tenderApplyNo: '',
                    tenderClass: 0,
                    tenderForm: 0,
                    tenderOrgId: '',
                    tenderOrgName: ''
                },
                content: {
                    content: '',
                    recordId: ''
                }
            },
            test: '',
            selectData: [],
            selectTableColumnAttr: [
                {
                    label: '单据编号',
                    prop: 'billNo'
                },
                {
                    label: '拟招标项目名称',
                    prop: 'tenderName'
                },
                {
                    label: '单据日期',
                    prop: 'gmtCreate'
                },
                {
                    label: '单据机构名称',
                    prop: 'orgName'
                }
            ],
            selectTableColumnWidth: {
                leftWidth: '150',
                rightWidth: '100'
            },
            selectDataPagination: {},
            rules: {
                tenderApplyNo: {
                    required: true,
                    message: '请输入招标编号',
                    trigger: 'blur'
                },
                projectName: {
                    required: true,
                    message: '拟招标项目名称',
                    trigger: 'blur'
                },
                tenderForm: {
                    required: true,
                    message: '请输入招标方式',
                    trigger: 'blur'
                },
                tenderClass: {
                    required: true,
                    message: '请输入招标类型',
                    trigger: 'blur'
                },
                packageName: {
                    required: true,
                    message: '请选择包件名称',
                    trigger: 'change'
                },
                noticeUser: {
                    required: true,
                    message: '请选择通知对象',
                    trigger: 'change'
                },
                state: {
                    required: true,
                    message: '请选择是否中标',
                    trigger: 'change'
                },
                tenderOrgName: {
                    required: true,
                    message: '请输入状态',
                    trigger: 'blur'
                }
            },
            packageNameOptions: [],
            noticeUserNameOptions: []
        }
    },
    computed: {
        ...mapState({
            options: state => state.biddingApplication.dictionaries
        }),
        tenderId () {
            return this.$route.query.tenderId || this.$route.query.billid
        }
    },
    components: {
        // ComTreeTable,
        // ComTreeFile,
        // ComPagination,
        ComShowBiddingButton
    },
    created () {
        (async () => {
            await this.tenderApplyFindById()
            // this.getNowDate()
            // 假数据
            // this.formData.baseInfo.packageName =
            //     '选择评标结果登记状态是已审核且没有流标招标申请的包件'
            // this.formData.baseInfo.packageId =
            //     '选择评标结果登记状态是已审核且没有流标招标申请的包件'
            // this.formData.baseInfo.noticeUser = '从中标候选人中选择一个'
            // this.formData.baseInfo.noticeUserId = '从中标候选人中选择一个'
        })()
        // this.getCandidate()
        this.getPackage()
    },
    mounted () {},
    methods: {
        getCandidate () {
            bidNoticeRequest
                .getCandidate({ packageId: this.formData.baseInfo.packageId })
                .then(res => {
                    this.noticeUserNameOptions = res
                })
        },
        getPackage () {
            bidNoticeRequest
                .getPackage({ tenderApplyId: this.tenderId })
                .then(res => {
                    this.packageNameOptions = res
                })
        },
        noFocus () {
            this.$refs.noFocus1?.blur()
            this.$refs.noFocus2?.blur()
        },
        dateChange (value) {
            if (value === 'startTime') {
                this.formData.baseInfo.startTime =
                    this.formData.baseInfo.startTime
                        .toLocaleDateString()
                        .replace(new RegExp('/', 'g'), '-')
            } else {
                this.formData.baseInfo.endTime = this.formData.baseInfo.endTime
                    .toLocaleDateString()
                    .replace(new RegExp('/', 'g'), '-')
            }
        },
        selectChange (kvId, label) {
            if (label === '采购方式') {
                this.options.tenderForm.forEach(item => {
                    if (item.kvId === kvId) {
                        this.formData.baseInfo.tenderFormName = item.kvKey
                    }
                })
            } else if (label === '币种') {
                this.options.currency.forEach(item => {
                    if (item.kvValue === kvId) {
                        this.formData.baseInfo.currency = item.kvKey
                    }
                })
            } else if (label === '包件名称') {
                this.packageNameOptions.forEach(item => {
                    if (item.name === kvId) {
                        this.formData.baseInfo.packageId = item.dtlId
                    }
                })
                this.getCandidate()
            } else if (label === '通知对象') {
                this.noticeUserNameOptions.forEach(item => {
                    if (item.candidateName === kvId) {
                        this.formData.baseInfo.noticeUserId = item.candidateId
                    }
                })
                // console.log(kvId)
            }
        },
        async tenderApplyFindById () {
            await applyRequest.tenderApplyFindById(this.tenderId).then(res => {
                // 表单提交信息映射基础招标信息
                const tenderData = res
                Object.keys(this.formData.baseInfo).forEach(formDataKey => {
                    Object.keys(tenderData).forEach(tenderDataKey => {
                        if (formDataKey === tenderDataKey) {
                            this.formData.baseInfo[formDataKey] =
                                tenderData[tenderDataKey]
                        }
                    })
                })
                // 部分数据对应不上，需要增改
                this.formData.baseInfo.tenderApplyId = tenderData.billId // res的billid是招标id，新增补遗招标id是tenderApplyId
                this.formData.baseInfo.tenderApplyNo = tenderData.billNo
                delete this.formData.baseInfo.billId // 新增不需要表单的billId
                delete this.formData.baseInfo.billNo
                delete this.formData.baseInfo.workId // 新增不需要基础信息的workId
                this.formData.baseInfo.projectName = res.tenderName
                this.formData.baseInfo.tenderOrgId = res.tenderUserId
                this.formData.baseInfo.tenderOrgName = res.tenderUser
                this.formData.baseInfo.state = 0 // 状态默认为草稿
            })
        },
        showBidding () {
            // 客户端弹窗弹出本地页面
            openAppClient(
                `/biddingApplicationShow?see=true&tenderId=${this.tenderId}`,
                '查看招标'
            )
        },
        selectCurrentChange (page) {
            this.tenderApplyQueryPage({ limit: 20, page })
        },
        selectDataSearch (searchValue) {
            this.tenderApplyQueryPage({ key: searchValue, limit: 20, page: 1 })
        },
        selectDataConfirm (data) {
            this.state = 'main'
            this.formData.baseInfo.applyOrgName = data.orgName
            this.formData.baseInfo.applyOrgId = data.orgId
        },
        tenderApplyNoInputFocus () {
            this.$refs.tenderApplyNoInput.blur()
        },
        stateChange (name) {
            this.state = name
            if (name === 'selectData') {
                this.tenderApplyQueryPage()
            }
        },
        tenderApplyQueryPage (params = { limit: 20, page: 1 }) {
            applyRequest.tenderApplyQueryPage(params).then(res => {
                this.selectData = res.list
                this.selectDataPagination.total = res.totalCount
            })
        },
        // dialogCloseHook () {
        //     this.initData()
        // },
        // initData () {
        //     this.formData = {
        //         state: 0
        //     }
        // },
        submit () {
            bidNoticeRequest.create(this.formData).then(res => {
                this.$refs.ruleForm.validate(async valid => {
                    if (valid) {
                        const callBack = () => {
                            this.$router.push({
                                path: './bidWinningNoticeEdit',
                                query: { billid: res }
                            })
                        }
                        const cancelCallBack = () => {
                            this.$router.push({
                                path: './biddingApplicationEdit',
                                query: {
                                    billid: this.tenderId,
                                    seat: 'bidWinningNotice'
                                }
                            })
                        }
                        this.clientPop(
                            'suc',
                            '保存成功，是否继续？',
                            callBack,
                            null,
                            cancelCallBack
                        )
                    } else {
                        return false
                    }
                })
            })
        },
        // getVuexData () {
        //     // 获取保存在vuex的数据
        //     this.formData = {
        //         ...this.formData,
        //         ...JSON.parse(
        //             JSON.stringify(
        //                 this.$store.state.biddingApplication.formData
        //             )
        //         )
        //     }
        //     // 获取保存在vuex的常量
        //     if (Object.keys(this.$store.state.userInfo.orgInfo).length !== 0) {
        //         this.formData.baseInfo.orgId = this.$store.state.userInfo.orgInfo.orgId
        //         this.formData.baseInfo.orgName =
        //             this.$store.state.userInfo.orgInfo.orgName
        //     }
        //     console.log('this.formData1', this.formData)
        // },
        handleFullScreen () {
            this.fullscreen = !this.fullscreen
        },
        handleClose () {
            this.$router.push({
                path: './biddingApplicationEdit',
                query: { billid: this.tenderId, seat: 'bidWinningNotice' }
            })
        },
        cellClsNm ({ column }) {
            if (column.label === '') {
                return 'fixed-left'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        }
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    padding: 0 20px;
    /* .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    } */
}
.form {
    margin-top: 10px;
}

.e-table {
    background: #fff;

    /* .top {
    .left {
      padding: 20px;
      padding-top: 0px;
    }
  } */
}

.upload {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.upload-demo {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
